<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/tests.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="../../../dist/js/epoch.js"></script>
        <script src="../js/data.js"></script>
        <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
    </head>
    <body>
        <h1>Basic Line Chart Test</h1>
        <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Basic Line</p>

        <ol>
            <li><a href="#test-1">Single Series</a></li>
            <li><a href="#test-2">Single Series II</a></li>
            <li><a href="#test-3">Multi Series</a></li>
            <li><a href="#test-4">Single Series Transition</a></li>
            <li><a href="#test-5">Multi Series Transition</a></li>
            <li><a href="#test-6">Single to Multi Series Transition</a></li>
            <li><a href="#test-7">Color Override</a></li>
            <li><a href="#test-8">Categorical Colors</a></li>
            <li><a href="#test-9">Multi Series without Labels</a></li>
            <li><a href="#test-10">Multi Series with Fixed Domain</a></li>
            <li><a href="#test-11">Show/Hide Layers</a></li>
        </ol>

        <!-- Test 1 -->
        <div id="test-1" class="test">
            <h2>1. Single Series</h2>
            <p>Display a plot of <code>y = cos(x)</code> over the range <code>[-2&pi;, 2&pi;)</code>.</p>
            <div class="epoch"></div>
        </div>

        <script>
        $(function() {
            var data = [{ label: 'A', values: [] }],
                length = 128;
            for (var i = 0; i < length; i++) {
                var x = i * 4 * Math.PI / length - 2 * Math.PI,
                    y = Math.cos(x);
                data[0].values.push({x: x, y: y});
            }
            $('#test-1 .epoch').epoch({ type: 'line', data: data });
        });
        </script>

        <!-- Test 2 -->
        <div id="test-2" class="test">
            <h2>2. Single Series II</h2>
            <p>Display a plot of <code>y = e<sup>x</sup>*sin(x)</code> from <code>[0, &pi)</code>.</p>
            <div class="epoch"></div>
        </div>

        <script>
        $(function() {
            var data = [{ label: 'A', values: [] }],
                length = 128;
            for (var i = 0; i < length; i++) {
                var x = i * Math.PI / length,
                    y = Math.exp(x) * Math.sin(x);
                data[0].values.push({x: x, y: y});
            }
            $('#test-2 .epoch').epoch({type: 'line', data: data});
        })
        </script>

        <!-- Test 3 -->
        <div id="test-3" class="test">
            <h2>3. Multi Series</h2>
            <p>
                Display a plot of the following functions over the range [0, 2&pi;]:
                <ul>
                    <li><code>x*sin(x)</code></li>
                    <li><code>x*cos(x)</code></li>
                </ul>
            </p>
            <div class="epoch"></div>
        </div>

        <script>
        $(function() {
            var data = [
                    { label: 'A', values: [] },
                    { label: 'B', values: [] }
                ],
                length = 128;
            for (var i = 0; i < length; i++) {
                var x = i * 2 * Math.PI / length;
                data[0].values.push({x: x, y: x*Math.sin(x)});
                data[1].values.push({x: x, y: x*Math.cos(x)});
            }
            $('#test-3 .epoch').epoch({type: 'line', data: data});
        });
        </script>

        <!-- Test 4 -->
        <div id="test-4" class="test">
            <h2>4. Single Series Transition</h2>
            <p>
                Correctly transition between the functions <code>y = 1 / x</code> and <code>y = x<sup>2</sup></code> over the range [1, 2).
                Use the buttons below the chart to initiate the transitions.
            </p>
            <div class="epoch"></div>
            <p>
                <button data-index="0">y = 1 / x</button>
                <button data-index="1">y = x^2</button>
            </p>
        </div>

        <script>
        $(function() {
            var data1 = [{label: 'A', values: []}],
                data2 = [{label: 'B', values: []}],
                data = [data1, data2],
                length = 128;

            for (var i = 0; i < length; i++) {
                var x = i / length + 1;
                data1[0].values.push({x: x, y: 1/x});
                data2[0].values.push({x: x, y: x*x});
            }

            var chart = $('#test-4 .epoch').epoch({ type: 'line', data: data1 });

            $('#test-4 button').on('click', function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.update(data[index]);
            });
        });
        </script>

        <!-- Test 5 -->
        <div id="test-5" class="test">
            <h2>5. Multi Series Transition</h2>
            <p>
                Correctly transition between Set A:
                <ul>
                    <li><code>y = sin(x)</code></li>
                    <li><code>y = x - x<sup>3</sup>/3! + x<sup>5</sup>/5!</code></li>
                </ul>
                Set B:
                <ul>
                    <li><code>y = cos(x)</code></li>
                    <li><code>y = 1 - x<sup>2</sup>/2! + x<sup>4</sup>/4!</code></li>
                </ul>
                and Set C:
                <ul>
                    <li><code>y = sin(x) - (x - x<sup>3</sup>/3! + x<sup>5</sup>/5!)</code></li>
                    <li><code>y = cos(x) - (1 - x<sup>2</sup>/2! + x<sup>4</sup>/4!)</code></li>
                </ul>
            </p>
            <div class="epoch"></div>
            <p>
                <button data-index="0">Set A</button>
                <button data-index="1">Set B</button>
                <button data-index="2">Set C</button>
            </p>
        </div>

        <script>
        $(function() {
            var fac = function(n) {
                var result = n;
                while(--n > 1) {
                    result *= n;
                }
                return result;
            };

            var taylorSin = function(x) {
                return x - Math.pow(x, 3) / fac(3) + Math.pow(x, 5) / fac(5);
            };

            var taylorCos = function(x) {
                return 1 - Math.pow(x, 2) / fac(2) + Math.pow(x, 4) / fac(4);
            };

            var data1 = [
                    { label: 'A', values: [] },
                    { label: 'B', values: [] }
                ],
                data2 = [
                    { label: 'A', values: [] },
                    { label: 'B', values: [] }
                ],
                data3 = [
                    { label: 'A', values: [] },
                    { label: 'B', values: [] }
                ],
                data = [data1, data2, data3],
                length = 64;

            for (var i = 0; i <= length; i++) {
                var x = i * 8 / length - 4;
                data1[0].values.push({x: x, y: Math.sin(x)});
                data1[1].values.push({x: x, y: taylorSin(x)});
                data2[0].values.push({x: x, y: Math.cos(x)});
                data2[1].values.push({x: x, y: taylorCos(x)});
                data3[0].values.push({x: x, y: Math.sin(x) - taylorSin(x)});
                data3[1].values.push({x: x, y: Math.cos(x) - taylorCos(x)});
            }

            var chart = $('#test-5 .epoch').epoch({ type: 'line', data: data1 });

            $('#test-5 button').on('click', function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.update(data[index]);
            });
        });
        </script>

        <!-- Test 6 -->
        <div id="test-6" class="test">
            <h2>6. Single to Multi Series Transition</h2>
            <p>
                Correctly transition between Set A:
                <ul>
                    <li><code>y = ln(x)</code></li>
                </ul>
                Set B:
                <ul>
                    <li><code>y = ln(x)</code></li>
                    <li><code>y = x * ln(x)</code></li>
                    <li><code>y = x * ln(x)<sup>2</sup></code></li>
                </ul>
            </p>
            <div class="epoch"></div>
            <p>
                <button data-index="0">Single</button>
                <button data-index="1">Multi</button>
            </p>
        </div>

        <script>
        $(function() {
            var data1 = [{label: 'A', values: []}],
                data2 = [
                    {label: 'A', values: []},
                    {label: 'B', values: []},
                    {label: 'C', values: []}
                ],
                data = [data1, data2],
                length = 128;

            for (var i = 0; i <= length; i++) {
                var x = i * 2 / length + 1;
                data1[0].values.push({x: x, y: Math.log(x)});
                data2[0].values.push({x: x, y: Math.log(x)});
                data2[1].values.push({x: x, y: x * Math.log(x)});
                data2[2].values.push({x: x, y: x * Math.log(x) * Math.log(x)});
            }

            var chart = $('#test-6 .epoch').epoch({ type: 'line', data: data1 });

            $('#test-6 button').on('click', function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.update(data[index]);
            });
        });
        </script>

        <!-- Test 7 -->
        <div id="test-7" class="test">
            <h2>7. Color Override</h2>
            <p>
                Display the first layer of the plot as pink, the second layer as green, and the third layer as blue.
            </p>
            <div class="epoch"></div>
        </div>

        <style>
        #test-7 .epoch .a .line { stroke: pink; }
        #test-7 .epoch .b .line { stroke: green; }
        #test-7 .epoch .c .line { stroke: blue;  }
        </style>

        <script>
        $(function() {
            var data = [
                    {label: 'A', values: []},
                    {label: 'B', values: []},
                    {label: 'C', values: []}
                ],
                length = 64;

            for (var i = 0; i < length; i++) {
                var x = i * 1 / length + 0.5;
                for (var j = 0; j < data.length; j++) {
                    data[j].values.push({x: x, y: Math.pow(x, 2*j) * Math.log(x)});
                }
            }

            $('#test-7 .epoch').epoch({ type: 'line', data: data });
        });
        </script>

        <!-- Test 8 -->
        <div id="test-8" class="test">
            <h2>Categorical Colors</h2>
            <p>
                Change layer colors automatically when switching between the following categorical color classes on the containing element:
                <ul>
                    <li><code>category10</code></li>
                    <li><code>category20</code></li>
                    <li><code>category20b</code></li>
                    <li><code>category20c</code></li>
                </ul>
                Change the categorical colors by pressing the buttons below the chart.
            </p>
            <div class="epoch category10"></div>
            <p>
                <button data-class="category10">category10</button>
                <button data-class="category20">category20</button>
                <button data-class="category20b">category20b</button>
                <button data-class="category20c">category20c</button>
            </p>
        </div>

        <script>
        $(function() {
            var data = [
                    {label: 'A', values: []},
                    {label: 'B', values: []},
                    {label: 'C', values: []},
                    {label: 'D', values: []},
                    {label: 'E', values: []},
                    {label: 'F', values: []},
                    {label: 'G', values: []}
                ],
                length = 64,
                className = 'category10';

            for (var i = 0; i <= length; i++) {
                var x = i * 1 / length;
                for (var j = 0; j < data.length; j++) {
                    data[j].values.push({x: x, y: Math.pow(x, j+1)});
                }
            }

            $('#test-8 .epoch').epoch({ type: 'line', data: data });

            $('#test-8 button').on('click', function(e) {
                $('#test-8 .epoch').removeClass(className);
                className = $(e.target).attr('data-class');
                $('#test-8 .epoch').addClass(className);
            });
        });
        </script>


        <!-- Test 9 -->
        <div id="test-9" class="test">
            <h2>9. Multi Series without Labels</h2>
            <p>
                Correctly render a multi-series plot of:
                <ul>
                    <li><code>y = sin(x)</code></li>
                    <li><code>y = cos(x)</code></li>
                </ul>
                where the layers are given without labels.
            </p>
            <div class="epoch"></div>
        </div>
        <script>
        $(function() {
            var data = [{values: []}, {values: []}],
                length = 128;

            for (var i = 0; i <= length; i++) {
                var x = i * 4 * Math.PI / length;
                data[0].values.push({x: x, y: Math.sin(x)});
                data[1].values.push({x: x, y: Math.cos(x)});
            }

            $('#test-9 .epoch').epoch({ type: 'line', data: data });
        });
        </script>

        <!-- Test 10 -->
        <div id="test-10" class="test">
            <h2>10. Multi Series with Fixed Domain</h2>
            <p>
                Display a plot of the following functions:
                <ul>
                    <li><code>x*sin(x)</code></li>
                    <li><code>x*cos(x)</code></li>
                </ul>
                On the domain <code>[0, 5]</code> and range <code>[0, 4]</code>.
            </p>
            <div class="epoch"></div>
        </div>

        <script>
        $(function() {
            var data = [
                    { label: 'A', values: [] },
                    { label: 'B', values: [] }
                ],
                length = 128;
            for (var i = 0; i < length; i++) {
                var x = i * 2 * Math.PI / length;
                data[0].values.push({x: x, y: x*Math.sin(x)});
                data[1].values.push({x: x, y: x*Math.cos(x)});
            }
            $('#test-10 .epoch').epoch({
                type: 'line',
                data: data,
                domain: [0, 5],
                range: [0, 4]
            });
        });
        </script>

        <!-- Test 11 -->
        <div id="test-11" class="test">
            <h2>11. Show/Hide Layers</h2>
            <div class="epoch"></div>
            <p>
                <button data-index="0">Toggle A</button>
                <button data-index="1">Toggle B</button>
                <button data-index="2">Toggle C</button>
            </p>
        </div>
        <script>
        $(function() {
            var chart = $('#test-11 .epoch').epoch({
                type: 'line',
                data: data().add(function(x) { return x; })
                    .add(function(x) { return 1.5*x; })
                    .add(function(x) { return 2.0*x; }).get([0, 10], 1)
            });

            $('#test-11 button').click(function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.toggleLayer(index);
            });
        });
        </script>

        <!-- Test 12 -->
        <div id="test-12" class="test">
            <h2>12. Multi-axis</h2>
            <div class="epoch"></div>
        </div>
        <script>
        $(function() {
            var d = [
              { range: 'left', values: [] },
              { range: 'right', values: [] }
            ];

            for (var i = 0; i < 40; i++) {
              d[0].values.push({ x: i, y: 10*i });
              d[1].values.push({ x: i, y: Math.cos(2*Math.PI*i/40.0) });
            }

            var chart = $('#test-12 .epoch').epoch({
                type: 'line',
                data: d,
                axes: ['left', 'right'],
                range: {
                  left: 'left',
                  right: 'right'
                }
            });
        });
        </script>
    </body>
</html>
